<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8"/>
  <title>在线学习系统</title>
  <link rel="stylesheet" th:href="@{/answer/css/semantic.min.css}"/>
  <link rel="stylesheet" th:href="@{/answer/font/iconfont.css}"/>
  <script type="text/javascript" th:src="@{/jquery/jquery-1.11.1.js}"></script>
  <script type="text/javascript" th:src="@{/answer/js/semantic.min.js}"></script>
  <script type="text/javascript" th:src="@{/answer/js/jquery.countdown.min.js}"></script>
  <th:block th:include="common/pub_head :: default"></th:block>
  <style>
    .icon-dui {
      margin-left: 5px;
      color: #21ba45;
    }

    .green {
      color: #21ba45;
    }

    .blue {
      color: #1E9FFF
    }

    .red {
      color: #FF5722;
    }

    .icon-cuo {
      margin-left: 5px;
      color: red;
    }

    .hide {
      display: none;
    }

    .no-data {
      text-align: center;
      color: #999;
      margin: 30px auto;
      font-size: 20px;
    }

    .byFile {
      display: none;
    }

    .answerInfo {
      display: none;
    }

    .back {
      padding: 4px 5px;
      float: right;
      color: #555;
      cursor: pointer;
    }

    .back:hover {
      background-color: #f2f2f2;
    }

  </style>
</head>
<body>
<div class="ui fixed inverted menu" style="display: none">
  <span th:href="@{/}" class="header item" style="border: none">
    <!--<img class="ui" th:src="@{/img/logo_flat.png}" width="104" height="24" alt="" />-->
    <img class="ui" th:src="@{/img/logo.png}" width="32" height="32" alt=""/>&nbsp;&nbsp;&nbsp;易联众平台部
  </span>
</div>
<div class="ui header container" style="margin-top: 4em;">
  <div class="tool-menu" style="position: fixed;padding-top: 2px;top: 0px;z-index: 1000;background-color: #fff;">
    <div class="ui large breadcrumb">
      <a class="section" th:href="@{/dic/library}"><i class="home icon"></i>在线考试列表</a>
      <i class="right chevron icon divider"></i>
      <div class="section" th:text="${answerCardBean.title}"></div>
    </div>

    <div class="back" onclick="history.back(-1)">
      <span>
        <i class="layui-icon layui-icon-return" style="text-align: right"></i>
        返回
      </span>
    </div>

    <div class="ui secondary pointing menu">
      <a class="item answerType active" data-answerType="SINGLE"><i class="block layout icon"></i>单选</a>
      <a class="item answerType" data-answerType="MULTI"><i class="block layout icon"></i>多选</a>
      <a class="item answerType" data-answerType="JUDGE"><i class="block layout icon"></i>判断</a>
      <a class="item answerType" data-answerType="FILL_BLANK"><i class="block layout icon"></i>填空</a>
      <a th:if="${error != 'ERROR'}" class="item answerType" data-answerType="ANSWER"><i class="block layout icon"></i>简答</a>
    </div>
  </div>
</div>

<div class="ui problemDetail container" style="margin-top: 80px">
  <div class="ui grid">
    <!-- 选择题,问答题 -->
    <div class="ten wide column">
      <th:block th:each="answerQuestionBean,stat : ${answerCardBean.answerQuestionBeanList}">
        <div th:class="'hide answerCard ' + ${answerQuestionBean.answerType}"
             th:attr="data-num=${answerQuestionBean.num}, data-answerType=${answerQuestionBean.answerType},data-id=${answerQuestionBean.id}">
          <div class="row" style="margin-top: 10px">
            <div class="ui stacked segment">
              <h4 th:class="'ui horizontal divider header mao' + ${answerQuestionBean.answerType} + ${answerQuestionBean.num}">
                第<span th:text="${answerQuestionBean.num}"></span>题
              </h4>
              <p style="font-size: 16px;" th:text="${answerQuestionBean.question}">
              </p>
            </div>
          </div>
          <!-- 编程题 -->
          <div class="row" style="margin-top: 1em;">
            <div class="ui segment">
              <h5 class="ui dividing header">作答区</h5>
              <div class="ui form currentQuestionAnswer" th:attr="data-answer=${answerQuestionBean.answer}">
                <div class="grouped fields">
                  <th:block th:each="answerOptionsBean: ${answerQuestionBean.answerOptionsBeanList}">
                    <div class="field">
                      <div class="ui toggle checkbox" style="width: 100%">
                        <th:block th:if="${answerQuestionBean.answerType == 'SINGLE'}">
                          <input type="radio" th:name="'questionAnswer' + ${answerOptionsBean.answerQuestionId}"
                                 th:value="${answerOptionsBean.selectOption}"/>
                          <label style="display: inline"
                                 th:text="${answerOptionsBean.selectOption} + '&nbsp;&nbsp;' + ${answerOptionsBean.optionInfo}"></label>
                        </th:block>
                        <th:block th:if="${answerQuestionBean.answerType == 'MULTI'}">
                          <input type="checkbox" th:name="'questionAnswer' + ${answerOptionsBean.answerQuestionId}"
                                 th:value="${answerOptionsBean.selectOption}"/>
                          <label style="display: inline"
                                 th:text="${answerOptionsBean.selectOption} + '&nbsp;&nbsp;' + ${answerOptionsBean.optionInfo}"></label>
                        </th:block>
                        <th:block th:if="${answerQuestionBean.answerType == 'JUDGE'}">
                          <input type="radio" th:name="'questionAnswer' + ${answerOptionsBean.answerQuestionId}"
                                 th:value="${answerOptionsBean.selectOption}"/>
                          <label style="display: inline"
                                 th:text="${answerOptionsBean.selectOption} + '&nbsp;&nbsp;' + ${answerOptionsBean.optionInfo}"></label>
                        </th:block>
                        <th:block th:if="${answerQuestionBean.answerType == 'FILL_BLANK'}">
                          <span style="float: left" th:text="${answerOptionsBean.selectOption}"></span>
                          <input type="text" style="width: 50%;float: left;margin-left: 8px"/>
                        </th:block>
                      </div>
                    </div>
                  </th:block>
                  <th:block th:if="${answerQuestionBean.answerType == 'ANSWER'}">
                    <textarea rows="5" style="margin-bottom: 5px"></textarea>
                  </th:block>
                  <button type="button" style="display: inline"
                          th:attr="data-num=${answerQuestionBean.num}, data-answerType=${answerQuestionBean.answerType}"
                          class="ui positive button correct">
                    提交
                  </button>
                </div>
              </div>
            </div>
          </div>

          <div class="row parseInfo" style="margin-top: 1em;display: none">
            <div class="ui segment">
              <h5 class="ui dividing header" style="color: #21ba45">解析</h5>
              <div class="ui form" style="color: #999" th:utext="${answerQuestionBean.parseInfo}">
              </div>
            </div>
          </div>
        </div>
      </th:block>
      <div class="no-data">没有题目......</div>
    </div>
    <div class="one wide column">
    </div>
    <div class="four wide column">
      <div style="position: fixed;width: 300px">
        <div class="row byFile">
          <table class="ui table">
            <tbody>
            <tr>
              <td><span style="font-weight: bolder;">考生学号:</span></td>
              <td><span>3508221993xxxxxx</span></td>
            </tr>
            <tr>
              <td><span style="font-weight: bolder;">当前考生:</span></td>
              <td><span>张三</span></td>
            </tr>
            <!--<tr>
              <td><span style="font-weight: bolder;">剩余时间:</span></td>
              <td><span id="contestTimeCountdown">00:00:00</span></td>
            </tr>-->
            <tr>
              <td><span style="font-weight: bolder;">开始时间:</span></td>
              <td><span id="startTime"></span></td>
            </tr>
            <tr>
              <td><span style="font-weight: bolder;">当前时间:</span></td>
              <td><span id="currentTime"></span></td>
            </tr>
            <!--<tr>
              <td><span style="font-weight: bolder;">结束时间:</span></td>
              <td><span th:text="${#dates.format(endTime, 'yyyy-MM-dd HH:mm:ss')}"></span></td>
            </tr>-->
            </tbody>
          </table>
        </div>
        <div class="row" style="margin-top: 1em;">
          <div class="ui segment">
            <div class="title">答题卡</div>
            <div class="content ui segment" id="currentQuestionButton"
                 style="max-height: 220px;overflow-x: hidden;overflow-y: auto">
              <th:block th:each="answerQuestionBean : ${answerCardBean.answerQuestionBeanList}">
                <button style="margin-top: 10px;margin-left: 5px;display: none" th:text="${answerQuestionBean.num}"
                        th:class="'mini ui button mao btn-' + ${answerQuestionBean.answerType} + ' btn-mao' + ${answerQuestionBean.answerType} + ${answerQuestionBean.num}"
                        th:attr="data-answerType=${answerQuestionBean.answerType}"
                >
                </button>
              </th:block>
            </div>
            <!--<button class="mini ui button" style="margin-top: 10px;margin-left: 5px;">1</button>-->
          </div>
          <div class="extra content answerInfo">
            <button type="button" class="ui positive button" onclick="lookAnswerInfo('题卷导航')">题卷导航</button>
            </button>
          </div>
          <div class="extra content byFile">
            <button type="button" class="ui positive button" onclick="lookAnswerInfo('答题情况')">答题情况</button>
            <button type="button" style="background-color: #1E9FFF;" class="ui positive button"
                    onclick="completeStudy();">完成学习
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="one wide column">
  </div>
</div>
<div id="iconModel" style="display: none">
  <span class="iconfont"></span>
</div>
<th:block th:include="common/pub_head :: layui"></th:block>
<script>
  /*<![CDATA[*/
  layui.use(['form'], function () {
  });
  fixedWidth();
  $(window).resize(function () {
    fixedWidth();
  });

  function fixedWidth() {
    $(".tool-menu").width($(".ten").width());
  }

  /*]]>*/
</script>
<script th:inline="javascript">
  /*<![CDATA[*/
  jQuery(function () {
    if (window.parent) {
      $("#iframe", window.parent.document).height($(document).height() + 500);
    }

    var byFile = [[${byFile}]];
    if (byFile == "1") {
      $(".correct").click();
      $(".mao").removeClass("red");
      $(".mao").removeClass("green");
      $(".answerInfo").show();
    }

    currentTime();
  });
  $(document).on("keyup", ".answerCard .currentQuestionAnswer input[type=text],textarea", function () {
    var $answerCard = $(this).parents(".answerCard");
    var answerType = $answerCard.attr("data-answerType");
    var num = $answerCard.attr("data-num");
    var txt = "";
    if ($answerCard.hasClass("ANSWER")) {
      txt = $(this).parent().find("textarea").val();
    } else if ($answerCard.hasClass("FILL_BLANK")) {
      txt = $(this).parents(".fields").find("input").map(function () {
        return $(this).val();
      }).get().join("");
    }
    if (txt == "") {
      $(".btn-mao" + answerType + num).removeClass("blue");
    } else {
      $(".btn-mao" + answerType + num).addClass("blue");
    }
  });
  $(document).on("click", ".answerCard .currentQuestionAnswer input[type=checkbox],input[type=radio]", function () {
    var $answerCard = $(this).parents(".answerCard");
    var answerType = $answerCard.attr("data-answerType");
    var num = $answerCard.attr("data-num");
    var txt = $(this).parents(".fields").find("input").map(function () {
      if ($(this).prop("checked")) {
        return "1";
      }
    }).get().join("");
    if (txt == "") {
      $(".btn-mao" + answerType + num).removeClass("blue");
    } else {
      $(".btn-mao" + answerType + num).addClass("blue");
    }
  });

  function oneKeySubmit(title) {
    $(".correct").each(function () {
      var $answerCard = $(this).parents(".answerCard");
      if ($answerCard.hasClass("ANSWER")) {
        var txt = $(this).parent().find("textarea").val();
        if (txt != "") {
          $(this).click();
        }
      } else if ($answerCard.hasClass("FILL_BLANK")) {
        var txt = $(this).parent().find("input").map(function () {
          return $(this).val();
        }).get().join("");
        if (txt != "") {
          $(this).click();
        }
      } else {
        var txt = $(this).parent().find("input").map(function () {
          if ($(this).prop("checked")) {
            return "1";
          }
        }).get().join("");
        if (txt != "") {
          $(this).click();
        }
      }
    });

    lookAnswerInfo(title);
  }

  function lookAnswerInfo(title) {
    var content = "";
    var single = "单选题: <br/>";
    var multi = "<br/>多选题: <br/>";
    var judge = "<br/>判断题: <br/>";
    var fillBlank = "<br/>填空题: <br/>";
    var answer = "<br/>简答题: <br/>";
    var error = [[${error}]];
    if (error == "ERROR") {
      answer = "";
    }
    $("#currentQuestionButton").find(".button").each(function () {
      if ($(this).hasClass("btn-SINGLE")) {
        single += "<button class='" + $(this).attr("class") + "' data-answerType='SINGLE'>" + $(this).html() + "</button>";
      }
      if ($(this).hasClass("btn-MULTI")) {
        multi += "<button class='" + $(this).attr("class") + "' data-answerType='MULTI'>" + $(this).html() + "</button>";
      }
      if ($(this).hasClass("btn-JUDGE")) {
        judge += "<button class='" + $(this).attr("class") + "' data-answerType='JUDGE'>" + $(this).html() + "</button>";
      }
      if ($(this).hasClass("btn-FILL_BLANK")) {
        fillBlank += "<button class='" + $(this).attr("class") + "' data-answerType='FILL_BLANK'>" + $(this).html() + "</button>";
      }
      if ($(this).hasClass("btn-ANSWER")) {
        answer += "<button class='" + $(this).attr("class") + "' data-answerType='ANSWER'>" + $(this).html() + "</button>";
      }
    });
    content += single + multi + judge + fillBlank + answer;
    layer.open({
      area: ['350px', '570px'],
      title: title,
      content: content
    });
  }

  var saveAnswerLogFlag = true;
  var flag = [[${isSignIn}]];

  function completeStudy() {
    console.log($(".mao").length);
    var answerArr = $(".mao").filter(function () {
      return $(this).hasClass("blue") || $(this).hasClass("red") || $(this).hasClass("green");
    });
    if ($(".mao").length == answerArr.length) {
      oneKeySubmit("<span class='green'>恭喜你完成了学习</span>");
      if (!flag) {
        $.ajax({
          url:path+ '/signIn',
          type:'post',
          success:function () {
            window.parent.postMessage('signIn', '*');
          }
        });
      }
      if (saveAnswerLogFlag) {
        saveAnswerLog();
      }
    } else {
      oneKeySubmit("<span class='red'>还有未答的题目，不能完成学习</span>");
    }
  }

  function saveAnswerLog() {
    var answerCardId = [[${answerCardBean.id}]];
    var formData = {
      answerCardId: answerCardId,
      errorList: errorQuestionIdArr,
      singleCount: $('.SINGLE').length,
      singleCorrect: singleCorrect,
      multiCount: $('.MULTI').length,
      multiCorrect: multiCorrect,
      fillBlankCount: $('.FILL_BLANK').length,
      fillBlankCorrect: fillBlankCorrect,
      judgeCount: $('.JUDGE').length,
      judgeCorrect: judgeCorrect,
      logType: [[${logType}]]
    };
    formData.totalCount = formData.singleCount + formData.multiCount + formData.fillBlankCount + formData.judgeCount;
    formData.totalCorrect = formData.totalCount - errorQuestionIdArr.length;
    var URL = path + "/answer/saveAnswerLog";
    $.ajax({
      url: URL,
      type: 'POST',
      data: JSON.stringify(formData),
      contentType: 'application/json',
      dataType: 'json',
      success: function (jsonData) {
        if (jsonData.flag) {
          saveAnswerLogFlag = false;
        }
      }
    });
  }

  var startTime = new Date();
  $("#startTime").html(new Date().format("yyyy-MM-dd HH:mm:ss"));

  function currentTime() {
    var answerTime = [[${answerCardBean.answerTime}]];
    var date = new Date();
    $("#currentTime").html(date.format("yyyy-MM-dd HH:mm:ss"));
    // var remainTime = answerTime * 60 * 1000 - (date.getTime() - startTime.getTime()) + 1000;
    // var tmpTime = new Date("2010-10-01 00:00:00").getTime();
    // var tmpDate = new Date(tmpTime + remainTime);
    // var txt = tmpDate.format("HH:mm:ss");
    // $("#contestTimeCountdown").html(txt);
    var byFile = [[${byFile}]];
    // if (txt != "00:00:00" || remainTime > tmpTime) {
    //   setTimeout(currentTime, 1000);
    // } else if (byFile != "1") {
    //   layui.use(['form'], function () {
    //     // layer.alert("学习时间结束");
    //   });
    // }

    if (byFile != "1") {
      $(".byFile").show();
    }
  }

  $(document).on("click", ".mao", function () {
    var id = $(this).html();
    var answerType = $(this).attr("data-answerType");

    $(".answerType").each(function () {
      if ($(this).attr("data-answerType") == answerType) {
        $(this).click();
      }
    });

    var scroll = $(".mao" + answerType + id).offset();
    $(document).scrollTop(scroll.top - 100);
  });

  $(".answerType").click(function () {
    $(document).scrollTop(0);
    $(".answerType").removeClass("active");
    $(this).addClass("active");
    var answerType = $(this).attr('data-answerType');
    // 题目显示与隐藏
    $(".answerCard").hide();
    $("." + answerType).show();
    // 答题卡显示与隐藏
    $("#currentQuestionButton").find(".mao").hide();
    $("#currentQuestionButton").find(".btn-" + answerType).show();
    if ($("." + answerType).length == 0) {
      $(".no-data").show();
    } else {
      $(".no-data").hide();
    }
  });
  $(".answerType").eq(0).click();
  $(".correct").bind("click", function () {
    correct(this);
  });

  var errorQuestionIdArr = [];
  var singleCorrect = $('.SINGLE').length;
  var multiCorrect = $('.MULTI').length;
  var fillBlankCorrect = $('.FILL_BLANK').length;
  var judgeCorrect = $('.JUDGE').length;

  // 批改与查看答案
  function correct(thisObj) {
    var answerArr = ($(thisObj).parents(".currentQuestionAnswer").attr("data-answer") + "").split("★");
    var answerType = $(thisObj).attr("data-answerType");
    var flag = [];
    if ($(thisObj).parent().find("textarea").length > 0) {
      $(thisObj).parent().find("textarea").attr("disabled", "disabled");
      $(thisObj).parents(".answerCard").find(".parseInfo").show();
      var num = $(thisObj).attr("data-num");
      $(".btn-mao" + answerType + num).addClass("green");
      $(thisObj).unbind("click");

      return;
    }
    $(thisObj).parent().find("input").each(function (index, domEle) {
      var domEle = "";
      var fillFlag = false;
      if ($(this).attr("type") == "checkbox" || $(this).attr("type") == "radio") {
        if ($(this).prop("checked")) {
          flag.push($(this).val());
        }
      } else {
        fillFlag = true;
        flag.push($(this).val());
      }
      if (fillFlag) {
        if ($(this).val().split(" ").join("") == answerArr[index].split(" ").join("")) {
          domEle = "<span class='iconfont icon-dui'></span>";
          domEle += "&nbsp;&nbsp;<span class='green'>" + answerArr[index] + "</span>";
        } else {
          domEle = "<span class='iconfont icon-cuo'></span>";
          domEle += "&nbsp;&nbsp;<span class='red'>" + answerArr[index] + "</span>";
        }
      } else {
        for (var i = 0; i < answerArr.length; i++) {
          if ($(this).val().split(" ").join("") == answerArr[i].split(" ").join("")) {
            domEle = "<span class='iconfont icon-dui'></span>";
            break;
          } else {
            domEle = "<span class='iconfont icon-cuo'></span>";
          }
        }
      }
      $(this).attr("disabled", "disabled");
      $(this).parent().append(domEle);
    });

    var domEle = "";
    if (flag.join("").split(" ").join("") == answerArr.join("").split(" ").join("")) {
      domEle = "<span class='answer-correct'><span style='color: #21ba45;'>答案是: " + answerArr.join("&nbsp;") + "，恭喜你答对了</span><span class='iconfont icon-dui'></span></span>";
      var answerType = $(thisObj).attr("data-answerType");
      var num = $(thisObj).attr("data-num");
      $(".btn-mao" + answerType + num).addClass("green");
    } else {
      domEle = "<span class='answer-correct'><span style='color: #FF5722;'>答案是: " + answerArr.join("&nbsp;") + "，好可惜，答错了，看看解析吧！</span><span class='iconfont icon-cuo'></span></span>";
      var answerType = $(thisObj).attr("data-answerType");
      var num = $(thisObj).attr("data-num");
      // 记录错题号
      var error = {questionType: answerType, answerQuestionId: $(thisObj).parents("." + answerType).attr("data-id")};
      if (answerType == 'SINGLE') {
        singleCorrect--;
      } else if (answerType == 'MULTI') {
        multiCorrect--;
      } else if (answerType == 'FILL_BLANK') {
        fillBlankCorrect--;
      } else if (answerType == 'JUDGE') {
        judgeCorrect--;
      }
      errorQuestionIdArr.push(error);
      $(".btn-mao" + answerType + num).addClass("red");
    }
    $(thisObj).parent().append(domEle);
    $(thisObj).parents(".answerCard").find(".parseInfo").show();
    $(thisObj).unbind("click");
  }

  /*]]>*/
</script>

</body>
</html>